import * as echarts from 'echarts';
import { onMounted, watch, computed, watchEffect } from 'vue';

const formatData = (data: any) => {
  const arr: any = [];
  const legend: any = [];
  Object.keys(data).forEach((key: any) => {
    legend.push(`${key}(${data[key]})`);
    arr.push({ value: data[key], name: `${key}(${data[key]})` });
  });
  return {
    legend: legend,
    data: arr,
  };
};
const Comp = (props: any) => {
  const { id, data, lineColor, areaColor, key, yname} = props;
  watchEffect(
    () => {
      const myChart = echarts.init(document.getElementById(id) as any);
      // const _data = formatData(data || {});
      const _data = data[key];
      if (_data) {
        const option: any = {
          grid: {
            left: 50,
            top: 40,
            bottom: 40,
            right: 50,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: '#ffffff',
              fontSize: 10,
            },
            data: _data[0].xaxisList,
          },
          yAxis: {
            type: 'value',
            name: yname,
            axisLabel: {
              color: '#ffffff',
              fontSize: 10,
            },
            splitNumber: 3,
            splitLine: {
              lineStyle: {
                color: '#215570',
                type: [5, 10],
                dashOffset: 5,
              },
            },
          },
          series: [
            {
              data: _data[0].yaxisList[0].data,
              type: 'line',
              areaStyle: {
                color: areaColor
              },
              lineStyle: {
                color: lineColor
              }
            },
          ],
        };
        myChart.setOption(option);
      }
    
      window.addEventListener('resize', () => {
        myChart?.resize();
      });
    },
    {
      flush: 'post',
    },
  );
};

export default Comp;
